<template>
	<view>
		<u-navbar :title="title" :autoBack="true" :placeholder="true" />
		<u-swiper
			:list="detail.imgList"
			indicator
			indicatorMode="line"
			:height="320"
			:radius="0"
			circular
		></u-swiper>
		<view class="coreshop-bg-white">
			<view class="c-p-10 coreshop-flex coreshop-justify-between coreshop-align-center">
				<view>
					<view>{{detail.name}}</view>
					<view class="coreshop-font-12 c-m-t-10">
						<text class="coreshop-font-10 line-red">￥</text>
						<text class="line-red coreshop-font-15">{{detail.price}}</text>
						<text class="line-gray c-m-l-5">|</text>
						<text class="line-gray c-m-l-5">已预约{{detail.subscribeCount}}</text>
						<text class="line-gray c-m-l-5">|</text>
						<text class="line-gray c-m-l-5">服务时长{{detail.serviceTimes}}分钟</text>
					</view>
				</view>
				<!-- <view>
					<u-icon name="share" label="分享" labelPos="bottom" labelSize="12"></u-icon>
				</view> -->
			</view>
			<!-- <view class="coreshop-solid-bottom::after c-p-10 coreshop-flex coreshop-justify-between coreshop-align-center">
				<view>
					<view>门店</view>
					<view class="coreshop-font-12 line-gray c-m-t-10">广东省佛山市南海区官窑铭铭养生会所</view>
				</view>
				<view>
					<u-icon name="phone-fill" color="#0081ff" size="24"></u-icon>
				</view>
			</view> -->
		</view>
		<view class="bottom-button" @click="$u.route('/pages/reservation/seReservation', {projectId: detail.id, type:'purchase'})">
			<u-button icon="checkmark-circle" iconColor="#fff" text="立即预约" color="#e54d42"></u-button>
		</view>
	
	</view>
</template>

<script>
	export default {
		data(){
			return {
				title:'项目详情',
				detail:{
					imgList:[],
				}
			}
		},
		onLoad(opt) {
			this.getDetail(opt.id)
		},
		methods: {
			onShareAppMessage(res) {
				return {
					title: this.detail.name,
					path: `/pages/project/reservationDetails?id=${this.detail.id}`,
					imageUrl:this.detail.image
				}
			},
			getDetail(id){
				this.$u.api.ProjectGetDetial({id: id}).then(res=>{
					this.detail = res.data
					this.detail.imgList = [res.data.image]
				})
			}
		}
	}
</script>

<style>
</style>